@use '../../../assets/scss/_functions' as *;
@use '../../../assets/scss/_vars' as *;
@use '../../../assets/scss/_mixins' as *;

$topPanelHeight: #{px2rpx(170)};
$navHeight: #{px2rpx(36)};
$splitPanelHeight: #{px2rpx(50)};
$contentPanelClassifyWidth: #{px2rpx(80)};
$bottomPanelWrapperHeight: #{px2rpx(50)};
$contentPanelClassifyHeight: calc(100vh - #{$navHeight} - #{$splitPanelHeight});

.top-panel {
    box-sizing: border-box;
    height: $topPanelHeight;
}

.page-nav {
    height: $navHeight;
}

.split-panel-wrapper {
    height: $splitPanelHeight;
}

.content-panel-classify-wrapper {
    height: $contentPanelClassifyHeight;
    width: $contentPanelClassifyWidth;
}

.content-panel-main-wrapper {}

.bottom-panel-wrapper {
    height: $bottomPanelWrapperHeight;
}

.transition-transform {
    transition: transform .1s;
}

.nav-btn {
    --button-default-height: #{px2rpx(26)};
    height: var(--button-default-height);
}